<template>
  <div class="humi" ref="humi">
    <div class="humi_rbck">
      <!-- 左侧隐藏菜单 -->
      <div class="index_but" ref="open">
        <div class="humi_set">
          <div class="humi_set_nr"></div>
          <!-- <span class="humi_time">{{time}}</span> -->
          <!-- <el-button type="primary" @click="humiTime" style="font-size:22px">同步时间</el-button> -->
          <div class="sethumi">
            <h4>
              节能模式设置
              <span v-if="this.butdingshi!=528 && this.butdingshi!=272">(当前为手动模式)</span>
              <span v-if="this.butdingshi==272">(当前为日运行模式)</span>
              <span v-if="this.butdingshi==528">(当前为周运行模式)</span>
              <!-- <el-button type="primary" style="float:right;" @click="defaultTime()" class="sethumi_shou">恢复手动设置</el-button> -->
            </h4>
            <div class="sethumi_ms">
              <div class="sethumi_ms_title">模式选择：</div>
              <div>
                <el-button type="primary" @click="switchOpen(768)" :class="(this.butdingshi!=528 && this.butdingshi!=272) ? 'sethumibut':'humi_contol_but_gray'">手动模式</el-button>
                <el-button type="primary" @click="switchOpen(272)" :class="this.butdingshi==272 ? 'sethumibut':'humi_contol_but_gray'">日运行模式</el-button>
                <el-button type="primary" @click="switchOpen(528)" :class="this.butdingshi==528 ? 'sethumibut':'humi_contol_but_gray'">周运行模式</el-button>
              </div>
              
            </div>
            <div class="setClose">
              <div @click="close()">取消</div>
            </div>
            
          </div>
          <div class="humi_set_open" @click="open()" ref="humihide">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-celanliebiaogengduo" />
            </svg>
          </div>
        </div>
      </div>
      <div style="width:100%;height:100%">
        <div style="height:85%;position: relative;">
          <el-row class="topContent">
            <!-- 左侧功能界面 -->
            <el-col class="leftContent" style="border-right: 2px solid rgba(90, 93, 97, 0.4);">
              <div class="wsdContent" style="height:45%;">
                <!-- 表盘 -->
                <div class="wsdRight">
                  <div class="chart" ref="chartb"></div>
                  <div class="wsdRight_h4">
                    <h4>
                      <!-- 酸性气体 -->
                      {{parseFloat(this.humiData[2].value).toFixed(0)}}{{this.humiData[2].flag}}
                      <br/>
                      {{this.humiData[2].name}}
                    </h4>
                  </div>
                </div>
                <!-- 温湿度数据 -->
                <div class="wsdLeft">
                  
                  <div class="leftxq" style="text-align:right;padding-right: 35px;">
                    <p :key="item.id" v-for="item in leftList">{{item.name}}</p>
                    <!-- <p>{{this.humiData[1].name}}</p>
                    <p>{{this.humiData[2].name}}</p>
                    <p>{{this.humiData[3].name}}</p> -->
                  </div>
                </div>
                <div class="wsdLeft" style="text-align:left;">
                  <div class="leftxq">
                    <p :key="item.id" v-for="item in leftList">
                      <span style="margin-left:0px">{{item.value}}{{item.flag}}</span>
                    </p>
                  </div>
                </div>
              </div>
            </el-col>
            <!-- 中间功能界面 -->
            <el-col style="width:30%;height:100%;border-left: 2px solid rgba(90, 93, 97, 0.4);">
              <div class="humi_zimg">
                <img src="../../assets/deacidifier.png" alt />
              </div>
              <div class="contolContent2">
                <div class="controlFS">
                  <span class="numContent_numcan_title numContent_feng_title">风速设定:</span>
                  <span
                    class="numContent numContent_numcan"
                  >
                    <!-- 关机时 -->
                    <svg
                      class="icon"
                      aria-hidden="true"
                      style="font-size: 11.5rem;position: relative;top: -20px;"
                      v-if="(this.humiData[24].value == 0) || (this.humiData[50].value == 0)"
                    >
                      <use xlink:href="#icon-fengshan" />
                    </svg>
                    <!-- 开机风速已开启正常高低速 -->
                    <svg
                      :class=" this.speed != 1 ? 'icon active_d' : 'icon active_g' "
                      aria-hidden="true"
                      style="font-size: 11.5rem;position: relative;top: -20px;"
                      v-if="(this.humiData[24].value != 0) && (this.humiData[50].value != 0)"
                    >
                      <use xlink:href="#icon-fengshan" />
                    </svg>
                  </span>
                  <el-button
                    @click="speedD()"
                    :class="(this.humiData[24].value == 0) || (this.humiData[50].value == 0) ?'humi_contol_but_gray':'humi_contol_but'"
                    style="margin-right: 10px;"
                  >
                  <span v-if="(this.humiData[24].value == 0) || (this.humiData[50].value == 0)">无风</span>
                  <span v-if="this.speed == 0 && this.humiData[24].value != 0 && this.humiData[50].value != 0">低速</span>
                  <span v-if="this.speed == 1 && this.humiData[24].value != 0 && this.humiData[50].value != 0">高速</span>
                    <!-- 设备开机时并且风机工作状态为关闭时 -->
                  </el-button>
                </div>
              </div>
            </el-col>
            <!-- 右侧功能区域 -->
            <el-col style="width:35%;height:100%;border-left: 2px solid rgba(90, 93, 97, 0.4);">
              <div class="wsdContent" style="height:45%;">
                <!-- 表盘 -->
                <div class="wsdRight">
                  <div class="chart" ref="charta"></div>
                  <div class="wsdRight_h4">
                    <h4>
                      <!-- PM2.5 -->
                      {{parseFloat(this.humiData[3].value).toFixed(0)}}{{this.humiData[3].flag}}
                      <br/>
                      {{this.humiData[3].name}}
                      <!-- <br />{{this.humiData[1].name}} -->
                    </h4>
                  </div>
                </div>
                <!-- 温湿度数据 -->
                <div class="wsdLeft">
                  <div class="leftxq" style="text-align:right;padding-right: 35px;">
                    <p :key="item.id" v-for="item in rightList">{{item.name}}</p>
                    <!-- <p>当前湿度</p>
                    <p>CO2浓度</p>
                    <p>PM2.5浓度</p>
                    <p>PM10浓度</p> -->
                  </div>
                </div>
                <div class="wsdLeft" style="text-align:left;">
                  <div class="leftxq">
                    <p :key="item.id" v-for="item in rightList">
                      <span style="margin-left:0px">{{item.value}}{{item.flag}}</span>
                    </p>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 底部操作按钮 -->

        <div style="height:15%;position: relative;">
          <el-row class="bootomContent">
            <!-- 开关机状态 -->
            <el-col :class="this.butswitch == 1 ? 'humi_control' : 'humi_control humi_gray'">
              <div @click="switchOpen(0)" class="humi_control_div">
                <svg class="icon" aria-hidden="true" v-if="this.butswitch == 1">
                  <use xlink:href="#icon-guanji" />
                </svg>
                <svg class="icon" aria-hidden="true" v-if="this.butswitch == 0">
                  <use xlink:href="#icon-guanji-copy" />
                </svg>
                <span v-if="this.butswitch == 1">
                  关机
                  <!-- {{this.butswitch}}{{this.switchValue}}{{this.humiData[24].value}} -->
                </span>
                <span v-if="this.butswitch == 0">
                  开机
                  <!-- {{this.butswitch}}{{this.switchValue}}{{this.humiData[24].value}} -->
                </span>
              </div>
            </el-col>
            <!-- 净化消毒 -->
            <el-col
              :class="this.butsteri == 1 && this.butswitch == 1 ? 'humi_control' : 'humi_control humi_gray'"
            >
              <div @click="switchOpen(1)" class="humi_control_div">
                <svg class="icon" aria-hidden="true" v-if="this.butsteri == 1">
                  <use xlink:href="#icon-guangboshajun" />
                </svg>
                <svg class="icon" aria-hidden="true" v-if="this.butsteri != 1">
                  <use xlink:href="#icon-guangboshajun-copy" />
                </svg>
                净化消毒
                <!-- {{this.steriValue}},{{this.butsteri}},{{this.humiData[29].value}} -->
              </div>
            </el-col>
            <!-- 持续除酸 -->
            <el-col
              :class="this.buthumi == 1 && this.butswitch == 1 ? 'humi_control' : 'humi_control humi_gray'"
            >
              <div @click="switchOpen(3)" class="humi_control_div">
                <svg class="icon" aria-hidden="true" v-if="this.buthumi == 1">
                  <use xlink:href="#icon-caozuo_jiashi" />
                </svg>
                <svg class="icon" aria-hidden="true" v-if="this.buthumi != 1">
                  <use xlink:href="#icon-caozuo_jiashi_g-copy" />
                </svg>
                持续除酸
                <!-- {{this.humiValue}},{{this.buthumi}},{{this.humiData[30].value}} -->
              </div>
            </el-col>
            <!-- 自动运行 -->
            <el-col
              :class="this.butconstant == 1 && this.butswitch == 1 ? 'humi_control' : 'humi_control humi_gray'"
            >
              <div @click="switchOpen(4)" class="humi_control_div">
                <svg class="icon" aria-hidden="true" v-if="this.butconstant == 1">
                  <use xlink:href="#icon-caozuo_jiashi" />
                </svg>
                <svg class="icon" aria-hidden="true" v-if="this.butconstant != 1">
                  <use xlink:href="#icon-caozuo_jiashi_g-copy" />
                </svg>
                自动运行
                <!-- {{this.constantValue}},{{this.butconstant}},{{this.humiData[26].value}} -->
              </div>
            </el-col>
            <!-- 工作表 -->
            <el-col
              :class="this.butswitch == 1 && (this.butdingshi==528|| this.butdingshi==272)? 'humi_control' : 'humi_control humi_gray'"
            >
              <div @click="open()" class="humi_control_div">
                <svg
                  class="icon"
                  aria-hidden="true"
                  v-if="this.butswitch == 1 && (this.butdingshi==528 || this.butdingshi==272)"
                >
                  <use xlink:href="#icon-naozhong_huaban" />
                </svg>
                <svg
                  class="icon"
                  aria-hidden="true"
                  v-if="this.butdingshi!=528 && this.butdingshi!=272"
                >
                  <use xlink:href="#icon-naozhong_huaban-copy" />
                </svg>
                节能模式
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import * as echarts from 'echarts'
export default {
  inject: ["reload"],
  props: ["activeIndex"],
  data() {
    return {
      dataor:1,//判断接口是否成功，1表示有返回成功，0表示失败，3之内无返回就置0表示失败
      devlist:'',
      setdayauto: "",
      dayauto2: "",
      time: "", // 获取时间
      disabled1: false,
      disabled2: false,
      charts: "",
      opinionData: ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"],
      password: "",
      data: [],
      run: true,
      shi: 0,
      shitimer: null,
      timeGetData: '',
      //表盘湿度值
      wuran: 0,
      fenchen: 0,
      //开关web优化速度所需
      speed: 0,
      num: "",
      butswitch: 0,
      butpurify: 0,
      butsteri: 0,
      buthumi: 0,
      butconstant: 0,
      butdingshi: 0,
      // 点击发送时样式状态值
      hide: 0,
      constantHide: 0,
      switchHide: 0,
      purifyHide: 0,
      steriHide: 0,
      humiHide: 0,
      //10秒计时数
      switchNum: 0,
      purifyNum: 0,
      steriNum: 0,
      humiNum: 0,
      constantNum: 0,
      //点击发送值
      switchValue: 2,
      purifyValue: 2,
      steriValue: 2,
      humiValue: 2,
      constantValue: 2,
      //延迟时间
      ycTime: 20,
      //开机动画计时
      openNum: 0,
      //模式操作变量
      dayautoNum: 0,
      //操作状态
      caozuo: "",
      Humiserial: 0,
      serialValue: 0,
      //污染粉尘
      wuranzi:'安全洁净',
      fenchenzi:'空气洁净',
    };
  },
  created() {
    this.data = JSON.parse(localStorage.getItem("menuDataJson")).unit
    this.data[0].name = "送风温度"
    this.data[1].name = "送风湿度"
    this.data[2].name = "回风温度"
    this.data[3].name = "回风湿度"
    //数据
    this.getDataStart()
  },
  computed: {
    // 运行参数表盘
    humiData() {
      var arr = [];
      if (this.data.length == 0) {
        let o = {
          ready: null,
          name: "",
          value: 0,
          max: 0,
          flag: "",
        };
        for (let i = 0; i <= 131; i++) {
          arr.push(o);
        }
      } else {
        for (let i = 0; i <= 131; i++) {
          arr.push(this.data[i]);
        }
      }
      return arr;
    },
    //左侧数据循环
    leftList(){
            let arr = [] ;
            this.humiData[2].value = parseFloat(this.humiData[2].value).toFixed(0)
            arr.push(this.humiData[2])
            this.humiData[4].value = parseFloat(this.humiData[4].value).toFixed(1)
            this.humiData[5].value = parseFloat(this.humiData[5].value).toFixed(0)
            this.humiData[6].value = parseFloat(this.humiData[6].value).toFixed(0)
            for (let index = 4; index < 9 ; index++) {
                if(this.humiData[index].ready == 1){
                    // const element = arr[index];
                    arr.push(this.humiData[index])
                }                
            }
            
            return arr;
      },
    //右侧数据循环
    rightList(){
            let arr = [] ;
            this.humiData[3].value = parseFloat(this.humiData[3].value).toFixed(0)
            arr.push(this.humiData[3])
            this.humiData[10].value = parseFloat(this.humiData[10].value).toFixed(1)
            this.humiData[11].value = parseFloat(this.humiData[11].value).toFixed(0)
            this.humiData[12].value = parseFloat(this.humiData[12].value).toFixed(0)
            for (let index = 10; index < 15 ; index++) {
                if(this.humiData[index].ready == 1){
                    // const element = arr[index];
                    arr.push(this.humiData[index])
                }                
            }
            return arr;
      },
  },
  methods: {
    //重新走接口
    getDataStart(){
      clearInterval(this.timeGetData);
      this.timeGetData = null;
      this.$nextTick(() => {
        this.timeGetData = setInterval(() => {
          if(this.dataor == 0){ //接口失败提示
            this.$message({
              message: '服务器访问失败',
              type: 'error',
              duration: 1000
            });
          }
          this.getData(JSON.parse(localStorage.getItem("当前设备编号")))
          this.dataor = 0
        }, 3000); 
      })
    },
    // 请求数据
    getData(info){
      this.devlist = info
      if(info.uid == null || info.uid == "null"){//清空缓存第一次进入时找不到info.uid，页面为空页面的处理
        info.uid = 0
      }
      var params = {
          "getdevinfo":[
            {
              "uid": info.uid,
              "type": info.type,
              "addr": info.addr,
              "unittype":"id-name-ready-value-flag-max-min"
            }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params).then((res) => {
        this.dataor = 1// 接口成功置1
        if(res.data.getdevinfo == undefined){ //数据返回不全失败提示
          this.$message({
            message: '服务器访问失败',
            type: 'error',
            duration: 1000
          });
        }else{
          localStorage.setItem("当前设备状态", res.data.getdevinfo[0].alarmstate);
          this.data = res.data.getdevinfo[0].unit;
          // 污染等级
          if(this.data[0].value < 1){
            this.wuran = -0.3
            this.wuranzi = '安全洁净'
          }else if(this.data[0].value > 1){
            this.wuran = 2.3
            this.wuranzi = '重度污染'
          }else if(this.data[0].value == 1){
            this.wuran = 1
            this.wuranzi = '轻度污染'
          }
          // 粉尘等级
          if(this.data[1].value < 1){
            this.fenchen = -0.3
            this.fenchenzi = '空气洁净'
          }else if(this.data[1].value > 1){
            this.fenchen = 2.3
            this.fenchenzi = '重度污染'
          }else if(this.data[1].value == 1){
            this.fenchen = 1
            this.fenchenzi = '轻度粉尘'
          }
          this.num = parseFloat(this.data[34].value).toFixed(0);
          this.speed = this.data[27].value;
          //模式设定
          if (this.dayautoNum == this.data[24].value) {
            $(".message-logout").css("display", "none");
            this.butdingshi = this.data[24].value;
          }
          if (this.switchNum < this.ycTime && this.switchNum != 0) {
            if (this.caozuo != this.data[24].value) {
              this.switchValue = 1;
            }
          }

          if (this.switchNum >= this.ycTime) {
            if (this.caozuo != this.data[24].value) {
              this.$message("操作失败，请稍后操作");
            }
            this.switchNum = 0;
            this.switchValue = 2;
          }
          //赋值
          if (this.switchValue == 2) {
            //状态逻辑
            if (this.data[24].value == 0) {//关机
              this.butswitch = 0;
              this.butsteri = 0;
              this.buthumi = 0;
              this.butconstant = 0;
            } else if (this.data[24].value == 16 || this.data[24].value == 768) {//开机
              this.butswitch = 1;
              this.butsteri = 0;
              this.buthumi = 0;
              this.butconstant = 0;
            } else if (this.data[24].value == 24) {//净化消毒
              this.butswitch = 1;
              this.butsteri = 1;
              this.buthumi = 0;
              this.butconstant = 0;
            } else if (this.data[24].value == 20) {//持续除酸
              this.butswitch = 1;
              this.butsteri = 0;
              this.buthumi = 1;
              this.butconstant = 0;
            } else if (this.data[24].value == 17) {//自动运行
              this.butswitch = 1;
              this.butsteri = 0;
              this.buthumi = 0;
              this.butconstant = 1;
            } else if (
              this.data[24].value == 272 ||//按天和按周自动运行
              this.data[24].value == 528
            ) {
              this.butswitch = 1;
              this.butsteri = 0;
              this.buthumi = 0;
              this.butconstant = 0;
              this.butdingshi = this.data[24].value;
            }
          }

          this.initChart();
        }
      })
    },
    //开关机状态改变
    switchOpen(val) {
      var st;
      this.switchNum = 0;
      var switchNum = setInterval(() => {
        this.switchNum++;
        if (this.switchNum >= this.ycTime) {
          // this.getData(1)
          clearInterval(switchNum);
        }
      }, 1000);
      this.switchValue = 1;
      if (val == 0) {
        if (this.butswitch == 1) {
          st = 0; //关机
          this.butswitch = 0;
          this.butsteri = 0;
          this.buthumi = 0;
          this.butconstant = 0;
        } else {
          st = 16; //开机
          this.butswitch = 1;
          this.butsteri = 0;
          this.buthumi = 0;
          this.butconstant = 0;
        }
      } else if (val == 272 || val == 528 || val == 768) {
        if (this.butswitch == 0) {
          this.$message("系统关机无法操作");
          return false;
        } else {
          // this.$message({
          //   customClass: 'message-logout',
          //   duration: 0,
          //   message: '正在进行修改，请稍后'
          // })
          // $(".message-logout").css('top','0px')
          $(".message-logout").css("display", "flex");
          // this.$message("正在进行修改，请稍后");
          this.butdingshi = val;
          this.butsteri = 0;
          this.buthumi = 0;
          this.butconstant = 0;
          this.dayautoNum = val;
          st = val;
        }
      } else {
        if (this.butswitch == 0) {
          return false;
        } else if (
          this.humiData[24].value == 272 ||
          this.humiData[24].value == 528
        ) {
          this.$message("节能状态下无法操作");
          return false;
        } else {
          if (val == 1) {
            //灭菌
            if (this.butsteri == 1) {
              this.butsteri = 0;
              st = 16; //关
            } else if (this.butsteri == 0) {
              this.butsteri = 1;
              this.buthumi = 0;
              this.butconstant = 0;
              st = 24; //开
            }
          }else if (val == 3) {
            //加湿
            if (this.buthumi == 1) {
              this.buthumi = 0;
              st = 16; //关
            } else if (this.buthumi == 0) {
              this.buthumi = 1;
              this.butsteri = 0;
              this.butconstant = 0;
              st = 20; //开
            }
          } else if (val == 4) {
            //恒湿
            if (this.butconstant == 1) {
              this.butconstant = 0;
              st = 16; //关
            } else if (this.butconstant == 0) {
              this.butconstant = 1;
              this.butsteri = 0;
              this.buthumi = 0;
              st = 17; //开
            }
          }
        }
      }
      var params = {
          "setdevinfo":[
              {
                  "uid": this.devlist.uid,
                  "type": this.devlist.type,
                  "addr": this.devlist.addr,
                  "unit":[
                    {
                      id:24,
                      value:st
                    }
                  ]
              }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http
        .post(this.$baseUrl, params).then((res) => {
          this.caozuo = st;
          this.data[24].value = st
          this.getDataStart()
        });
    },
    // 控制隐藏菜单显示
    open() {
      let humihide = this.$refs.humihide;
      let humi_open = this.$refs.open;
      if (humi_open.style.left !== "0px") {
        humi_open.style.left = "0px";
        humi_open.style.padding = "40px";
        humihide.style.right = "-105px";
        // humi_open.style.background = "#fff";
      } else {
        humi_open.style.left = "-92%";
        humihide.style.right = "-900px";
        // humi_open.style.background = "none";
      }
    },
    // 点击其它地方控制隐藏菜单隐藏
    close() {
        let humihide = this.$refs.humihide;
        let humi_open = this.$refs.open;
        if (humi_open.style.left == "0px") {
          humi_open.style.left = "-92%";
          humihide.style.right = "-900px";
        }
    },
    // 仪表盘
    initChart() {
      var upsCharta = echarts.init(this.$refs.charta);
      var upsChartb = echarts.init(this.$refs.chartb);
      //右侧表盘
      var optionUpsCharta = {
        grid: {
          top: 10,
        },
        series: [
          {
            type: "gauge",
            startAngle: 230,
            endAngle: -50,
            radius: "100%",
            center: ["50%", "50%"],
            title:{
              show: true,
              offsetCenter: ["0%", "80%"],
              color: [
                  [0, "#963f4d"],
                  [0.3, "#00fcff"],
                  [0.7, "#909192"],
                  [1, "#963f4d"],
                ],
              fontSize: 30
            },
            axisTick: {
              show: true,
            },
            splitLine: {
              // 分隔线
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 2,
                color: "#fff",
                shadowColor: "#fff", //默认透明
                shadowBlur: 10,
              },
            },
            axisLabel: {
              // 坐标轴小标记
              show: false
            },
            detail: {
              show:false,
              // offsetCenter: [0, '85%'],
              textStyle: {
                fontSize: 40,
              },
              // formatter: (value) => {
              //   return value;
              // },
            },
            pointer: {
              show: true,
            },
            itemStyle: {
              color: "auto",
              opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              shadowBlur: 5, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
              shadowColor: "#000", // 阴影颜色。支持的格式同color。
            },
            emphasis: {
              // 高亮的 仪表盘指针样式
              itemStyle: {
                //高亮 和正常  两者具有同样的配置项,只是在不同状态下配置项的值不同。
              },
            },
            min: -1,
            max: 3,
            axisLine: {
              lineStyle: {
                width: 25,
                color: [
                  [0, "#963f4d"],
                  [0.3, "#00fcff"],
                  [0.7, "#909192"],
                  [1, "#963f4d"],
                ],
              },
            },
            data: [
              {
                value: parseFloat(this.fenchen).toFixed(1),
                name: this.fenchenzi,
              },
            ],
          },
        ],
        animationDurationUpdate: 5000, //指针移动速度
      };
      //左侧表盘
      var optionUpsChartb = {
        grid: {
          top: 10,
        },
        series: [
          {
            type: "gauge",
            startAngle: 230,
            endAngle: -50,
            radius: "100%",
            center: ["50%", "50%"],
            title:{
              show: true,
              offsetCenter: ["0%", "80%"],
              color: [
                  [0, "#963f4d"],
                  [0.3, "#00fcff"],
                  [0.7, "#909192"],
                  [1, "#963f4d"],
                ],
              fontSize: 30
            },
            axisTick: {
              show: true,
            },
            splitLine: {
              // 分隔线
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 2,
                color: "#fff",
                shadowColor: "#fff", //默认透明
                shadowBlur: 10,
              },
            },
            axisLabel: {
              // 坐标轴小标记
              show: false
            },
            detail: {
              show:false,
              // offsetCenter: [0, '85%'],
              textStyle: {
                fontSize: 40,
              },
              // formatter: (value) => {
              //   return value;
              // },
            },
            pointer: {
              show: true,
            },
            itemStyle: {
              color: "auto",
              opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              shadowBlur: 5, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
              shadowColor: "#000", // 阴影颜色。支持的格式同color。
            },
            emphasis: {
              // 高亮的 仪表盘指针样式
              itemStyle: {
                //高亮 和正常  两者具有同样的配置项,只是在不同状态下配置项的值不同。
              },
            },
            min: -1,
            max: 3,
            axisLine: {
              lineStyle: {
                width: 25,
                color: [
                  [0, "#963f4d"],
                  [0.3, "#00fcff"],
                  [0.7, "#909192"],
                  [1, "#963f4d"],
                ],
              },
            },
            data: [
              {
                value: parseFloat(this.wuran).toFixed(1),
                name: this.wuranzi,
              },
            ],
          },
        ],
        animationDurationUpdate: 5000, //指针移动速度
      };
      upsCharta.setOption(optionUpsCharta);
      upsChartb.setOption(optionUpsChartb);
    },
    // 控制湿度加减
    add: function () {
      if (this.butswitch == 0) {
        this.$message("关机状态修改无效");
        return false;
      } else {
        // this.num = this.humiData[34].value;
        if (this.disabled2 == true) {
          this.$message("操作频繁，设定值变化大可点击设定值手动输入");
        } else {
          if (this.num > 100) {
            this.num = 100;
            this.$message("最大值为" + 100);
          } else {
            this.num = parseInt(this.num);
            var params = {
                "setdevinfo":[
                    {
                        "uid": this.devlist.uid,
                        "type": this.devlist.type,
                        "addr": this.devlist.addr,
                        "unit":[
                          {
                            id:34,
                            value:this.num
                          }
                        ]
                    }
                ],
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http
              .post(this.$baseUrl, params)
              .then((res) => {
                this.$message("修改成功");
                this.data[34].value = this.num
                localStorage.setItem("menuDataJson", JSON.stringify(menuDataJson));
              });
          }
        }
        this.disabled2 = true;
        setTimeout(() => {
          this.disabled2 = false; //点击一次时隔两秒后才能再次点击
        }, 3000);
      }
    },
    //风速控制
    speedD() {
      if (this.butswitch == 0 || this.humiData[50].value == 0) {
        this.$message("当前状态无法操作");
        return false;
      }
      var st;
      if(this.speed == 0){
        st = 1
        this.speed = 1;
      }else{
        st = 0
        this.speed = 0;
      }
      var params = {
          "setdevinfo":[
              {
                  "uid": this.devlist.uid,
                  "type": this.devlist.type,
                  "addr": this.devlist.addr,
                  "unit":[
                    {
                      id:27,
                      value:st
                    }
                  ]
              }
          ],
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http
        .post(this.$baseUrl, params)
        .then((res) => {
          this.$message("修改成功");
          this.data[27].value = st
          localStorage.setItem("menuDataJson", JSON.stringify(menuDataJson));
        });
    },
  },
  // 清除定时器
    beforeDestroy() {
        clearInterval(this.timeGetData);
        this.timeGetData = null;
    },
};
</script>

<style scoped>
.humi {
  position: relative;
  height: 1000px;
  min-height: 90vh;
  width: 100%;
  letter-spacing: 2px;
  font-family: PingFangSC, helvetica neue, hiragino sans gb, arial,
    microsoft yahei ui, microsoft yahei, simsun, sans-serif !important;
}
.humi_open_rbck {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}
.humi_rbck {
  position: relative;
  height: 800px;
  width: 100%;
  letter-spacing: 2px;
  font-family: PingFangSC, helvetica neue, hiragino sans gb, arial,
    microsoft yahei ui, microsoft yahei, simsun, sans-serif !important;
}
@media screen and (max-width: 1400px) {
  .humi {
    height: 1140px;
  }
}
@media screen and (max-width: 830px) {
  .humi {
    height: 970px;
  }
}
.index_but {
  position: absolute;
  top: 0px;
  left: -92%;
  height: 100%;
  /* transition: all 0.5s; */
  width: 50%;
  z-index: 10;
  background: #fff;
  color: #000;
}
.humi_set {
  width: 100%;
  height: 100%;
  position: relative;
}
.humi_set .humi_set_open {
  position: absolute;
  top: 47%;
  right: -900px;
  font-size: 40px;
  cursor: pointer;
  color: #fff;
  /* transition: all 0.5s; */
}
.humi_nav_logo {
  margin: 20px;
}
.time {
  display: inline-block;
  float: right;
  width: 365px;
  text-align: left;
  font-size: 26px;
  margin-top: 20px;
}
.chart {
  height: 380px;
  width: 470px;
  margin: 0 auto;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.humi_control {
  height: 100%;
  flex: 1;
  position: relative;
  text-align: center;
  font-size: 40px;
  cursor: pointer;
  font-weight: bold;
  /* line-height: 5; */
  background: rgb(31, 116, 197, 0.7);
  border-bottom: 4px solid rgba(90, 93, 97, 0.4) !important;
  border-top: 4px solid rgba(90, 93, 97, 0.4) !important;
  border-right: 4px solid rgba(90, 93, 97, 0.4) !important;
}
.humi_control:last-child {
  border-right: none !important;
}
.humi_control .icon {
  margin-right: 10px;
}
.humi_gray {
  color: rgb(150, 147, 138);
  background: none;
}
.humi_gray div {
  color: rgb(150, 147, 138);
}
.humi_gray div span {
  color: rgb(150, 147, 138);
}
.topContent {
  height: 100%;
  display: flex;
}
.bootomContent {
  width: 100%;
  position: absolute;
  height: 100%;
  display: flex;
}
.leftContent {
  width: 35%;
  height: 100%;
}
.wsdContent .wsdLeft {
  width: 50%;
  float: left;
  position: relative;
  margin-top: 50px;
}
.wsdContent .wsdRight {
  width: 100%;
  float: left;
  position: relative;
}
.wsdRight_h4 {
  position: absolute;
  bottom: 120px;
  width: 100%;
  text-align: center;
}
.wsdContent .wsdRight h4 {
  text-align: center;
  font-size: 26px;
  font-weight: lighter;
  /* color: #00fcff; */
}
.wsdLeft h4 {
  line-height: 50px;
  font-size: 36px;
  margin-bottom: 10px;
  margin-left: 70px;
}
.wsdContent .warning {
  animation: mycolorwen 1s infinite;
  animation-timing-function: linear;
}
@keyframes mycolorwen {
  0% {
    color: red;
  }
  50% {
    color: #fff;
  }
  100% {
    color: red;
  }
}
.wsdLeft p {
  line-height: 50px;
  font-size: 26px;
  margin-left: 70px;
  color: #bdbfbe;
}
.wsdLeft p span {
  color: #00fcff;
  margin-left: 20px;
}
.leftxq {
  display: inline-block;
  width: 100%;
}
.yxztContent {
  padding: 30px;
  height: 50%;
}
.yxztContent:first-child {
  border-bottom: 4px solid rgba(90, 93, 97, 0.4);
}
.yxztContent h4 {
  font-size: 30px;
  text-align: right;
}
.yxztContent h4 span {
  margin-left: 8px;
}
.shuitong {
  position: relative;
  width: 250px;
  height: 250px;
  display: inline-block;
}
.shuitong .icon {
  font-size: 2.5rem;
}
.shuitongdiv {
  width: 160px;
  height: 180px;
  position: absolute;
  top: 65px;
  left: 20px;
  z-index: 0;
  border: 5px solid #fff;
  border-top: none;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.shuitongdiv ul {
  width: 100%;
}
.shuitongdiv ul li {
  width: 100%;
  height: 20.5px;
  margin-top: 4.71px;
  background-color: #36577959;
  list-style: none;
}
.shuitongdiv ul li:last-child {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.shuitong_active_red {
  background-color: #f00 !important;
}
.shuitong_active_bule {
  background-color: #70bdf98c !important;
}
.shuitongImg {
  height: 180px;
  position: absolute;
  top: 65px;
  left: 20px;
  z-index: 0;
}
.icon-jin {
  position: absolute;
  top: 40px;
  left: 10px;
  z-index: 10;
}
.icon-jin2 {
  width: 0.4em;
  height: 0.5em;
  position: absolute;
  top: 78px;
  left: 32px;
}
.icon-chu {
  position: absolute;
  bottom: 15px;
  right: 0px;
}
.icon-chu2 {
  width: 0.4em;
  height: 0.5em;
  position: absolute;
  bottom: -2px;
  right: 2px;
}
@keyframes blink2 {
  0% {
    color: #fff;
  }

  100% {
    color: #00fcff;
  }
}

@-webkit-keyframes blink2 {
  0% {
    color: #fff;
  }

  100% {
    color: #00fcff;
  }
}

.blink2 {
  /* color: #00fcff; */
  animation: blink2 1.5s linear infinite;

  -webkit-animation: blink2 1.5s linear infinite;
}
@keyframes blink {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.blink {
  color: #00fcff;
  animation: blink 1s linear infinite;

  -webkit-animation: blink 1s linear infinite;
}
.warning2 {
  color: #f7ca4c;
}
.warningZt {
  margin-top: 30px;
  float: right;
  font-size: 26px;
  text-align: left;
  margin-left: 70px;
  width: 50%;
}
.warningZt ul li {
  list-style: none;
  line-height: 66px;
}
.warningZt .icon {
  font-size: 2.4rem;
  color: #fff;
  position: relative;
  margin-right: 8px;
  top: 6px;
}
.numContent {
  font-weight: bold;
  font-size: 55px;
  display: block;left: 60px;top: 10px;text-align: right;float: left;width: 160px;
}
.contolContent2 {
  margin-top: 25px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.controlWDS {
  height: 42%;
}
.controlFS {
  height: 50%;
}
.contolContent .icon {
  font-size: 2rem;
}
/* .controlFS {
  margin-top: 30px;
} */
.humi_contol_but {
  background-color: #165ea8;
  border: none;
}

/deep/ .el-button {
  background-color: #165ea8 !important;
  border: none !important;
  color: #fff !important;
}
/deep/ .el-button:focus,
.el-button:hover {
  background-color: #165ea8;
  border: none;
  color: #fff;
}
/deep/ .humi_contol_but_gray {
  height: 60px;
  background-color: #b0b0b0 !important;
  border: none;
}
/* .humi_contol_but:hover{
  background-color: #165ea8;
} */
/deep/.contolContent2 .el-button.el-button--default span {
  color: #fff;
  font-size: 35px;
  font-weight: bold;
}
.active_g {
  animation: myrotate infinite 1s;
  animation-timing-function: linear;
}
.active_d {
  animation: myrotate infinite 3s;
  animation-timing-function: linear;
}
.ztxqContent {
  height: 85%;
  display: flex;
}
.ztxqContent_center {
  transform: scale(1.2);
  justify-content: center;
  align-items: center;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
}
.sethumi {
  margin-top: 30px;
}
.sethumi span {
  color: #1089e6;
  font-size: 26px;
}
.sethumi h4 {
  margin-bottom: 20px;
  font-size: 30px;
}
.sethumi_ms {
  margin-top: 20px;
}
.sethumi_ms_title {
  float: left;
  font-size: 27px;
  height: 50px;
  line-height: 50px;
}
.sethumi_ms_nr {
  float: left;
  height: 50px;
  line-height: 50px;
}
/deep/ .sethumi_ms_nr .el-radio__label {
  font-size: 23px !important;
}
/deep/ .sethumi_ms_nr .el-radio__inner {
  height: 25px !important;
  width: 25px !important;
}
/deep/ .sethumi_ms_nr .el-radio__inner::after {
  height: 10px !important;
  width: 10px !important;
}
.sethumi_ms_nr .el-button {
  font-size: 21px;
  width: 90px;
}
.numcan {
  width: 130px;
  font-size: 60px;
  position: relative;
  right: -4px;
  top: 1px;
  text-align: right;
  border: none;
  background: none;
  color: #fff;
  outline: none;
}

.numcan::-webkit-outer-spin-button,
.numcan::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.numContent_numcan_title {
  font-size: 34px;
}
.humi_control_div {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.numContent_feng_title {
  float: left;
  position: relative;
  left: 37px;
}
.zhuangtai {
  font-size: 37px;
}
.work_hide {
  background: rgba(185, 183, 183, 0.2);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.work_sp {
  width: 45px;
  height: 45px;
  clear: both;
  margin: 20px auto;
}
/* Spinner Circle Rotation */
.sp-circle {
  border: 4px rgba(0, 0, 0, 0.25) solid;
  border-top: 4px #7d7d7d solid;
  border-radius: 50%;
  -webkit-animation: spCircRot 0.6s infinite linear;
  animation: spCircRot 0.6s infinite linear;
}
.sp-circle2 {
  border: 4px rgba(206, 206, 206, 0.25) solid;
  border-top: 4px #d4d2d2 solid;
}
@-webkit-keyframes spCircRot {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@keyframes spCircRot {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.humi_zimg {
  width: 80%;
  height: 70%;
  margin: 0 auto;
  margin-top: 70px;
  text-align: center;
}
.humi_zimg img {
  height: 100%;
  opacity: 0.7;
}
.humi_z_p span {
  white-space: nowrap; /*强制span不换行*/
}
.humi_cz {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  /* padding-left: 20%; */
  margin-top: 10px;
}
.humi_cz span {
  position: relative;
  top: -10px;
  margin-left: 25px;
}
/deep/ .el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
  color: #c0c4cc;
  cursor: not-allowed;
  background-image: none;
  background-color: none;
  border-color: none;
}
/* 操作提示 */
#nav {
  height: 48px;
  position: relative;
  /* left: 20px; */
  overflow: hidden;
}
#nav ul {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
}
#nav ul li {
  height: 46px;
  line-height: 49px;
  text-align: center;
  list-style: none;
}
.sethumi_ms .el-button {
  font-size: 26px;
  min-width: 165px;
  height: 50px;
}
.sethumi_ms .sethumibut {
  height: 60px;
}
.sethumi .sethumi_shou {
  font-size: 22px;
  height: 50px;
}
.sethumi .setClose {
  width: 100%;
  text-align: right;
  padding-top: 60px;
}
.sethumi .setClose div {
  float: right;
  font-size: 24px;
  margin-right: 0px;
  height: 50px;
  width: 130px;
  text-align: center;
  background-color: #165ea8;
  border-radius: 4px;
  color: #fff;
  font-weight: 500;
  line-height: 50px;
  cursor: pointer;
}
#nav ul li {
  color: #fecb33;
}
#nav ul .nav_li {
  font-weight: bold;
  padding-left: 0px;
  font-size: 50px;
  background: -webkit-linear-gradient(
    left,
    #0ff,
    #a0a0a0 25%,
    #0ff 50%,
    #a0a0a0 75%,
    #0ff
  );
  color: transparent;
  -webkit-background-clip: text;
  background-size: 200% 100%;
  animation: masked-animation 1s infinite linear;
}
@-webkit-keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.numContent_numcan {
  position: relative;
}
.numContent_numcan_border {
  position: absolute;
  width: 110px;
  height: 1px;
  border: 1px solid #fff;
  background: #fff;
  bottom: 0px;
  left: 50px;
}
/deep/ .el-message {
  top: 0px !important;
}
.el-message .message-logout {
  display: none;
}
.warningZt .icon_ya {
  font-size: 2.7rem;
}
/deep/ .humiIp span {
  color: #fff !important;
}
.humiIp {
  float: right;
}
/deep/ .el-form-item__content {
  max-width: 100% !important;
}
/deep/ .el-input.is-disabled .el-input__inner {
  background-color: #ececec !important;
}
.item_ip_p1 {
  margin-bottom: 15px;
}
.item_ip_p2 {
  margin: 15px 0px;
}
/deep/ .el-input__inner {
  background: none !important;
}
/deep/ .el-dialog {
  transform: scale(1) !important;
}
/deep/ .el-dialog__body {
  padding: 10px 20px !important;
}
.humi_time {
  margin-left: 20px;
  font-size: 27px;
}
</style>

